<template>
  <div style="width: auto; height: 100%; background-color: #001529; overflow: auto">
    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <MenuUnfoldOutlined v-if="collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
    <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="collapsed"
    >
      <template v-for="(item, index) in StoreMenu.menuList" :key="item.title">
        <!--有菜单目录-->
        <a-sub-menu v-if="!item.isSingle" :key="item.title">
          <template #icon>
            <PieChartOutlined />
          </template>
          <template #title>
            <div class="menuitem">{{ item.title }}</div>
          </template>
          <a-menu-item v-for="(item1, index1) in item.menu" :key="item1.label" @click="menu_click(index, index1)">
            {{ item1.label }}
          </a-menu-item>
        </a-sub-menu>

        <!--无菜单目录-->
        <a-menu-item v-for="(item1, index1) in item.menu" v-else :key="item1.label" @click="menu_click(index, index1)">
          <template #icon>
            <PieChartOutlined />
          </template>
          <span>{{ item.title }}</span>
        </a-menu-item>
      </template>
    </a-menu>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from 'vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from '@ant-design/icons-vue'

import { storeToRefs } from 'pinia'
import { useStoreMenu } from '@/pinia/menuList'

export default defineComponent({
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
  },
  props: {
    sameMenuActiv: { type: String, default: () => {} },
  },
  emits: ['evt_menu_click'],
  setup(props, ctx) {
    const StoreMenu = useStoreMenu()
    const { sameMenuActiv } = toRefs(props)
    const state = reactive({
      collapsed: false,
      selectedKeys: ['主页'],
      openKeys: ['主菜单'],
      preOpenKeys: ['sub1'],
    })
    watch(
      () => state.openKeys,
      (_val, oldVal) => {
        state.preOpenKeys = oldVal
      }
    )
    const toggleCollapsed = () => {
      state.collapsed = !state.collapsed
      state.openKeys = state.collapsed ? [] : state.preOpenKeys
    }
    const menu_click = (index, index1) => {
      ctx.emit('evt_menu_click', { index, index1 })
    }

    watch(sameMenuActiv, (newV, oldV) => {
      state.selectedKeys = [newV]
    })

    return {
      ...toRefs(state),
      toggleCollapsed,
      StoreMenu,
      menu_click,
      oncontextmenu,
    }
  },
})
</script>
<style scoped>
.menuitem {
  margin-right: 30px;
}
</style>
